<template>
	
	<view class="goods_list">
            <goodsList  @goodsItemEvt="goodsItemDetailEvt" :GOODS="goods"></goodsList>
			<view  v-if="flag"    class="isOver">-----没有更多数据了-----</view>
	</view>
</template>

<script>
	
	import   goodsLIST from  '../../components/goods-list/goods-list.vue'
	
	export  default  {
		
		data (){
			return  {
				
				pageindex:1,
				goods:[],
				flag:false
				
			}
		},
		  components:{ goodsList:goodsLIST},
		  
		  onLoad(){
			  //获取商品数据
			  this.getGoodsList()
		  },
		  methods:{
			  
			  /* 2、按页、获取商品数据*/
			  async  getGoodsList(cb){
				  const  res = await  this.$myRequest({
					  url:'/api/getgoods?pageindex=' + this.pageindex
				  })
				  
				  this.goods=  [...this.goods,...res.data.message]
				    cb && cb() 
			  },
			  
			  goodsItemDetailEvt(id){
				 
				    uni.navigateTo({
						//注意：路由地址后面参数，不能有空格
						url:`/pages/goods-detail/goods-detail?id=${id}`
				    	//url:'/pages/goods-detail/goods-detail?id=' + id
				    })
			  }
		  },
		  onReachBottom() {
		  	       console.log('触底了')
				   if(this.goods.length < this.pageindex*10){
					   this.flag = true
					   return   
				   }
				   this.pageindex++
				   this.getGoodsList()
		  },
		  
		  onPullDownRefresh() {
		  	   console.log('下拉刷新了')
			   this.pageindex= 1,
			   this.goods = [],
			   this.flag = false
			   
			   setTimeout(()=>{
				   
				   this.getGoodsList(()=>{
					   uni.stopPullDownRefresh()
				   })
				   
			   },1000)
		  }
	}
</script>

<style  scoped  lang="scss">
	
	.goods_list{
		background-color: #eee;
	}
</style>